<template>
  <div class="app-container preWorkBox">
    <!-- edit begin by zyj 2024/11/06 异常流程未结束时不能手动解锁-->
    <!-- <MaskLayer
      :centerDialogVisible="visible"
      :onUnlock="onUnlock"
      :showClose2="true"
    ></MaskLayer> -->
    <!-- edit end by zyj 2024/11/06 异常流程未结束时不能手动解锁-->
    <MaskLayer
      :centerDialogVisible="visible"
      :showClose2="true"
    ></MaskLayer>
    <MaskLayer
      :centerDialogVisible="visible"
      :onUnlock="onUnlock"
      :showClose2="true"
    ></MaskLayer>
    <!-- 上料防错 -->
    <StepsItem
      ref="StepsItem"
      :changeObj="changeObj"
      :snCode="snCode"
    ></StepsItem>
    <div class="content">
      <div class="btnDiv">
        <el-button
          :type="this.btnIndex == '1' ? 'primary' : 'info'"
          @click="btnChange('1')"
          style="font-size: 24px"
          >上料防错</el-button
        >
        <el-button
          :type="this.btnIndex == '5' ? 'primary' : 'info'"
          @click="btnChange('5')"
          style="font-size: 24px"
          >物料解绑</el-button
        >
        <el-button
          :type="this.btnIndex == '2' ? 'primary' : 'info'"
          @click="btnChange('2')"
          style="font-size: 24px"
          >异常反馈</el-button
        >
        <el-button
          :type="this.btnIndex == '3' ? 'primary' : 'info'"
          @click="btnChange('3')"
          style="font-size: 24px"
          >SOP展示</el-button
        >
        <el-button
          :type="this.btnIndex == '4' ? 'primary' : 'info'"
          @click="btnChange('4')"
          style="font-size: 24px"
          >三码合一</el-button
        >
        <el-button
          :type="this.btnIndex == '12' ? 'primary' : 'info'"
          @click="btnChange('12')"
          style="font-size: 24px"
          >缺料详情</el-button
        >
        <el-button
          :type="this.btnIndex == '6' ? 'primary' : 'info'"
          @click="btnChange('6')"
          style="font-size: 24px"
          >工位检验</el-button
        >
        <el-button
          :type="this.btnIndex == '13' ? 'primary' : 'info'"
          @click="btnChange('13')"
          style="font-size: 24px"
          >调试工位</el-button
        >
        <el-button
          :type="this.btnIndex == '15' ? 'primary' : 'info'"
          @click="btnChange('15')"
          style="font-size: 24px"
          >IPQC返修</el-button
        >
        <el-button
          :type="this.btnIndex == '14' ? 'primary' : 'info'"
          @click="btnChange('14')"
          style="font-size: 24px"
          >序列号替换</el-button
        >
      </div>
      <SnYard
        v-show="this.btnIndex == '1'"
        :formObj="formObj"
        :snCode="snCode"
      ></SnYard>
      <Abnormal
        v-if="this.btnIndex == '2'"
        :formObj="formObj"
        :snCode="snCode"
      ></Abnormal>
      <SopShow v-if="this.btnIndex == '3'" :formObj="formObj"></SopShow>
      <!-- <ThreeYards v-if="this.btnIndex== '4'" :formObj="formObj"></ThreeYards> -->
      <ThreeYardBind
        v-if="this.btnIndex == '4'"
        :formObj="formObj"
      ></ThreeYardBind>
      <Stripping v-if="this.btnIndex == '5'" :formObj="formObj"></Stripping>
      <SelfInspection
        v-if="this.btnIndex == '6'"
        :formObj="formObj"
      ></SelfInspection>
      <ChangeBinding
        v-if="this.btnIndex == '7'"
        :formObj="formObj"
      ></ChangeBinding>
      <RegulationsResults
        v-if="this.btnIndex == '8'"
        :formObj="formObj"
      ></RegulationsResults>
      <PerfusionResult
        v-if="this.btnIndex == '9'"
        :formObj="formObj"
      ></PerfusionResult>
      <AgingInformation
        v-if="this.btnIndex == '10'"
        :formObj="formObj"
      ></AgingInformation>
      <ModeInformation
        v-if="this.btnIndex == '11'"
        :formObj="formObj"
      ></ModeInformation>
      <MaterialShortage
        v-if="this.btnIndex == '12'"
        :formObj="formObj"
      ></MaterialShortage>
      <DebuggingStation
        v-if="this.btnIndex == '13'"
        :formObj="formObj"
      ></DebuggingStation>
      <SerialReplace
        v-if="this.btnIndex == '14'"
        :formObj="formObj"
      ></SerialReplace>
      <IpqcAll v-if="this.btnIndex == '15'" :formObj="formObj"></IpqcAll>
    </div>
  </div>
</template>
    
<script>
import { listWorkorder, listWorkorder2, unLock } from "@/api/apppro/index";
// 头部公共部分
import StepsItem from "../components/stepsItem.vue";
import SnYard from "../components/snYard.vue";
import Abnormal from "../components/abnormal.vue";
import SopShow from "../components/sopShow.vue";
import Stripping from "../components/stripping.vue";
import ThreeYards from "../components/threeYards.vue";
import SelfInspection from "../components/selfInspection.vue";
import ChangeBinding from "../components/changeBinding.vue";
import MaskLayer from "../components/maskLayer.vue";
import RegulationsResults from "../components/regulationsResults.vue";
import PerfusionResult from "../components/perfusionResult.vue";
import AgingInformation from "../components/agingInformation.vue";
import ModeInformation from "../components/modeInformation.vue";
import ThreeYardBind from "../components/threeYardBind.vue";
import MaterialShortage from "../components/materialShortage.vue";
import DebuggingStation from "../components/debuggingStation.vue";
import SerialReplace from "../components/serialReplace.vue";
import IpqcAll from "../components/ipqcall.vue";
export default {
  name: "keyBingding",
  components: {
    StepsItem,
    SnYard,
    Abnormal,
    SopShow,
    ThreeYards,
    Stripping,
    SelfInspection,
    ChangeBinding,
    MaskLayer,
    RegulationsResults,
    PerfusionResult,
    AgingInformation,
    ModeInformation,
    ThreeYardBind,
    MaterialShortage,
    DebuggingStation,
    SerialReplace,
    IpqcAll,
  },
  data() {
    return {
      snCode: "",
      time: null, // 定时器
      btnIndex: "1",
      form: {},
      visible: false,
      loading: false,
      formObj: {},
      rules: {
        itemCode: [
          { required: true, message: "物料/产品编码不能为空", trigger: "blur" },
          {
            max: 64,
            message: "物料/产品编码长度必须小于64个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    clearInterval(this.timer);
    if (this.$route.query.snCode) {
      this.snCode = this.$route.query.snCode.substring(
        0,
        this.$route.query.snCode.length - 1
      );
    }
  },
  mounted() {
    //开工前准备 传过来sn码 调子组件查询方法
    if (this.$route.query.snCode) {
      this.$refs.StepsItem.getList(this.$route.query.snCode);
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    onUnlock() {
      const param = {
        snCode: this.snCode,
      };
      unLock(param).then((res) => {
        if (res.code == 200) {
          this.visible = false;
          this.$modal.msgSuccess(res.msg);
        }
      });
    },
    statusfun(index) {
      return "process";
    },
    submitForm() {},
    changeObj(obj) {
      console.log(obj, "obj");
      this.formObj = obj;
      this.settimeFun();
      this.timer = setInterval(() => {
        this.settimeFun();
      }, 30 * 1000);
    },
    // 产线停产接口函数
    settimeFun() {
      let workorderId = this.formObj.workorderId;
      console.log(workorderId, "====workorderId====");
      listWorkorder2({ snCode: this.snCode })
        .then((res) => {
          if (res.msg === "该SN码在此工位已锁定") {
            this.visible = true;
          }else{
            this.visible = false;
          }
        })
        .catch((err) => {});
    },
    reset() {
      this.form = {
        resource: undefined,
        resource1: undefined,
        resource2: undefined,
        resource3: undefined,
      };
      // this.autoGenFlag = false;
      this.resetForm("form");
    },
    btnChange(type) {
      this.btnIndex = type;
    },
  },
};
</script>
    
<style rel="stylesheet/scss" lang="scss" scoped>
.preWorkBox ::v-deep .el-icon-check::before {
  // display: none !important;
  content: "";
}

.perForm ::v-deep .el-form-item__label {
  font-size: 28px;
}

.perForm ::v-deep .el-radio__label {
  font-size: 18px;
}

.content {
  margin-top: 20px;
  width: calc(100% - 200px);

  justify-content: center;
  .btnDiv {
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    z-index: 99;
    button {
      margin: 15px 0;
    }
  }
}

.dialog_footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // display: flex;
  // justify-content: center;
}
.sn_box {
  text-align: left;
  margin-left: 10%;
  font-size: 20px;
  line-height: 40px;
}
</style>
    